<template>
  <div class="contianer">
    <headers :heatle="title"></headers>
    <div class="content">
      <div class="bookrack_data">
        <div>
          <img src="../img/carousel2.jpg" alt="">
          <p>name</p>
          <h6>开通会员，畅听全站好书</h6>
        </div>
        <div>
          <div>立即开通</div>
        </div>
      </div>
    </div>
    <footers></footers>
  </div>

</template>

<script>

  import footers from '@/components/footers'
  import headers from '@/components/headers'
    export default {
        name: "bookrack",
        components:{
          footers,
          headers
        },
      data(){
        return{
          title:'书架'
        }
      }
    }
</script>

<style scoped>
  .contianer{
    height:100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
  }
  .content{
    flex:1;
    -webkit-flex:1;
    background:#eee;
  }
  .bookrack_data{
    height: .6rem;
    background: firebrick;
    padding-top: .1rem;
  }
  .bookrack_data img{
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    margin-left: .1rem;
    float: left;
    margin-right: .1rem;
  }

  .bookrack_data>div:nth-child(1){
    float: left;
    width: 70%;
    text-align: left;
  }
  .bookrack_data>div:nth-child(2) div{
    color: goldenrod;
    background: #fff;
    border-radius: .2rem;
    width: 70%;
    font-size: .12rem;
    line-height: .22rem;
    height: .22rem;
    margin-top: .1rem;
  }
  .bookrack_data>div:nth-child(2){
    float: left;
    width: 30%;
  }


</style>
